<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>todolist</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <style>
      *{
        padding: 0;
        margin: 0;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      }
      .app{
        width: 100vw;
        height: 100vh;
        background: #eeeeee;
      }
      .app-top{
        height: 80px;
        background: #323232;
      }
      .app-top>label,input{
        display: inline-block;
        vertical-align: middle;
      }
      .app-top>label{
        width: 20%;
        line-height: 80px;
        text-align: center;
        color: #fff;
      }
      .app-top>input{
        outline: none;
        width: 70%;
        border: 1px solid #323232;
        height: 38px;
        border-radius: 3px;
        text-indent: 1em;
        font-size: 18px;
        letter-spacing: 1px;
        color: #323232;
      }
      .list-info>span{
        display: inline-block;
        line-height: 50px;
        width:49%;
      }
      .list-count{
        text-align: right;
      }
      li{
        background: #e2e2e2;
      }
      li*{
        display: inline-block;
      }
      li>input{
        border: none;
        outline: none;
        background: #e2e2e2;
      }
    </style>
  </head>
  <body>
      <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
